import React, { Component } from 'react';
import TheTable from "@/components/TheTable";
import ThePagination from "@/components/ThePagination";
import TheButton from "@/components/TheButton";
import TheQueryForm from '@/components/TheQueryForm';
import TheTableExtend from '@/components/TheTableExtend'
import { storeInfoPage, apiStoreInfoUpdateStoreState } from '@/request/storeBackManage/storeManage/storeLists.js'
import store from "@/store/store"
import _ from 'lodash';
import TheImage from '@/components/TheImage'
import { Space, Modal, Input, Switch } from "antd";

class Index extends Component {
  state = {
    columns: [
      {
        title: "ID",
        dataIndex: "storeId",
        width: 200,
        key: "storeId",
      },
      {
        title: "商家名称",
        dataIndex: "storeName",
        key: "storeName",
        width: 300,
      },
      {
        title: "类型",
        dataIndex: "isProprietary",
        key: "isProprietary",
        width: 200,
        render: (text) => {
          let label = ''
          switch (text) {
            case 'Y':
              label = "自营"
              break;
            case 'N':
              label = "非自营"
              break;
            default:
              label = "-"
          }
          return label
        }
      },
      {
        title: "经营类目",
        dataIndex: "businessCategory",
        key: "businessCategory",
        width: 200,
        render: (text) => {
          let label = ''
          switch (text) {
            case '0':
              label = "实体门店"
              break;
            case '1':
              label = "酒店"
              break;
            case '2':
              label = "医院"
              break;
            case '3':
              label = "上门服务"
              break;
            case '4':
              label = "线上店铺"
              break;
            default:
              label = "-"
          }
          return label
        }
      },
      {
        title: "状态",
        dataIndex: "storeStatus",
        key: "storeStatus",
        width: 200,
        render: (text, record) => {
          return <Switch onChange={() => this.storeStatusChange(record.storeStatus, record.storeId)} checked={record.storeStatus === 'Y'} />
        }
      },
      {
        title: "最近操作时间",
        dataIndex: "updateTime",
        key: "updateTime",
        width: 200,
      },
      {
        title: "操作",
        fixed: "right",
        width: 200,
        render: (text, render) => {
          return (
            <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', alignItems: 'center' }}>
              <TheButton haspermi={['storeBack:storeLists:edit']} onClick={() => this.goEdit(render.storeId)}>修改</TheButton>
              <TheButton haspermi={['storeBack:storeLists:view']} onClick={() => this.goDetail(render.storeId)}>查看</TheButton>
            </div>
          );
        },
      },
    ],
    dataSource: [],
    pageData: {
      pageNo: 1,
      pageSize: 10,
    },
    total: 0,
    newColumns: [],
    form_show: true,
    searchOption: [
      {
        field: 'storeName',
        label: 'ID/商家名称',
        placeholder: 'ID/商家名称',
        required: false,
        type: 'Input',
      },
      {
        field: 'isProprietary',
        label: '类型',
        placeholder: '全部',
        required: false,
        rules: [],
        type: 'Select',
        options: [
          { value: '', label: '全部' },
          { value: 'Y', label: '自营' },
          { value: 'N', label: '非自营' },
        ],
        defaultValue: ''
      },
      {
        field: 'businessCategory',
        label: '经营类目',
        placeholder: '全部',
        required: false,
        rules: [],
        type: 'Select',
        options: [
          { value: '', label: '全部' },
          { value: '0', label: '实体门店' },
          { value: '1', label: '酒店' },
          { value: '2', label: '医院' },
          { value: '3', label: '上门服务' },
          { value: '4', label: '线上店铺' },
        ],
        defaultValue: ''
      },
      {
        field: 'storeStatus',
        label: '状态',
        placeholder: '全部',
        required: false,
        rules: [],
        type: 'Select',
        options: [
          { value: '', label: '全部' },
          { value: 'Y', label: '开启' },
          { value: 'N', label: '关闭' },
        ],
        defaultValue: ''
      },
    ],
    queryForm: {},
  };
  componentDidMount() {
    this.getData()
  }
  getData = (values) => {
    const { queryForm, pageData } = this.state
    this.setState({
      queryForm: values === undefined ? queryForm : { ...values }
    }, async () => {
      const params = { ...pageData, ...this.state.queryForm }
      store.dispatch({
        type: 'SaveSearchValues',
        data: { pathName: 'storeLists', ...params }
      })
      await storeInfoPage({ ...params }).then(res => {
        if (res.code === 0 && res.data) {
          this.setState({
            dataSource: res.data,
            pageData: {
              pageNo: res.pageNo,
              pageSize: res.pageSize
            },
            total: res.totalCount,
          })
        }
      })
    })
  }
  // 新增
  goAdd = () => {
    this.props.history.push(`/storeBackManage/storeLists/add`);
  };
  // 编辑
  goEdit = (id) => {
    this.props.history.push(`/storeBackManage/storeLists/edit/${id}`);
  };
  // 详情
  goDetail = (id) => {
    this.props.history.push(`/storeBackManage/storeLists/detail/${id}`);
  }
  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo,
        pageSize
      }
    }, () => {
      this.getData()
    })
  };

  onReset() {
    this.setState({
      queryForm: {}
    }, () => {
      this.pageChange(1, 10)
    })
  }

  onColumnsFilter(value) {
    this.setState({
      newColumns: value
    })
  }

  onFormSearch(values) {
    this.setState({
      pageData: { pageNo: 1, pageSize: 10 }
    }, () => {
      this.getData(values)
    })
  }

  storeStatusChange = (storeStatus, storeId) => {
    if (storeStatus === 'Y') {
      React.$confirm({
        title: `关闭店铺会导致该店铺上架中的商品下架，且不可上架！且任何商品直降促销和优惠券活动均会被关闭不可开启，是否继续？`,
        onOk: async () => {
          let res = await apiStoreInfoUpdateStoreState({ storeStatus: 'N', storeId })
          if (res.code === 0) {
            React.$message({
              type: 'info',
              content: `店铺关闭成功`
            })
            this.getData()
          }
        }
      })
    }
    else {
      React.$confirm({
        title: `是否恢复该店铺的开店状态？`,
        onOk: async () => {
          let res = await apiStoreInfoUpdateStoreState({ storeStatus: 'Y', storeId })
          if (res.code === 0) {
            React.$message({
              type: 'info',
              content: `店铺开启成功`
            })
            this.getData()
          }
        }
      })
    }
  }

  render() {
    const {
      columns,
      dataSource,
      pageData: { pageNo, pageSize },
      total,
      searchOption,
      form_show,
      newColumns,
    } = this.state;
    return (
      <div className={"p-layout-box commodity-content"}>
        <TheQueryForm ref={(ref) => this.queryFormRef = ref} show={form_show} option={searchOption}
          onGetValues={(values) => this.onFormSearch(values)}
          onReset={(values) => this.onReset(values)}
        >
        </TheQueryForm>
        <TheTableExtend
          columns={columns}
          onFormTrigger={() => this.setState({ form_show: !this.state.form_show })}
          onTableRefresh={() => this.getData()}
          onColumnsFilter={(value) => this.onColumnsFilter(value)}
        >
          <TheButton haspermi={['storeBack:storeLists:add']} type="primary" size="middle" onClick={this.goAdd}>
            新增
          </TheButton>
        </TheTableExtend>
        <TheTable
          scroll={{ x: "960", y: '61vh' }}
          columns={newColumns}
          dataSource={dataSource}
          rowKey={'storeId'}
        />
        <ThePagination
          pageNo={pageNo}
          pageSize={pageSize}
          total={total}
          pageChange={this.pageChange}
        />
      </div>
    );
  }
}

export default Index;
